aws-amplify-vueのサンプルアプリで画像アップロードを動かすためにやったこと
aws-amplify-vueのサンプルアプリで画像アップロードを試そうとしたところ、「Missing credentials in config」というエラーが発生し、画像アップロードが動きませんでした。 GitHubのissueを参考にソースを修正する事で解決したので、手順をご紹介します。
はじめに
サーバーレス開発部＠大阪の岩田です。 Aws AmplifyがVue.jsに対応した事もあり、最近Vue.jsをちょこちょこ触っています。
サンプルアプリをイジリながら、色々試していたところ下記のようにMissing credentials in configというエラーが出て画像アップロードの処理がうまく動きませんでした。
GitHubのissueを参考にソースを修正する事で解決したので、手順をご紹介します。
環境
Node.jsのバージョンはv8.10.0を使用しました。
ライブラリのバージョンは下記の通りです
npm list --depth=0 aws-amplify-vue-sample@1.0.0 /Users/...........aws-amplify-vue ├── autoprefixer@7.2.6 ├── aws-amplify@1.1.4 ├── aws-amplify-vue@0.1.1 ├── aws-sdk@2.354.0 ├── babel-core@6.26.3 ├── babel-eslint@7.2.3 ├── babel-helper-vue-jsx-merge-props@2.0.3 ├── babel-loader@7.1.5 ├── babel-plugin-syntax-jsx@6.18.0 ├── babel-plugin-transform-runtime@6.23.0 ├── babel-plugin-transform-vue-jsx@3.7.0 ├── babel-preset-env@1.7.0 ├── babel-preset-stage-2@6.24.1 ├── chalk@2.4.1 ├── copy-webpack-plugin@4.6.0 ├── css-loader@0.28.11 ├── e@0.0.4 ├── eslint@3.19.0 ├── eslint-friendly-formatter@3.0.0 ├── eslint-loader@1.9.0 ├── eslint-plugin-html@3.2.2 ├── eventsource-polyfill@0.9.6 ├── extract-text-webpack-plugin@3.0.2 ├── file-loader@1.1.11 ├── friendly-errors-webpack-plugin@1.7.0 ├── fsts@0.0.39 ├── html-webpack-plugin@2.30.1 ├── node-notifier@5.3.0 ├── optimize-css-assets-webpack-plugin@3.2.0 ├── ora@1.4.0 ├── portfinder@1.0.19 ├── postcss-import@11.1.0 ├── postcss-loader@2.1.6 ├── rimraf@2.6.2 ├── semver@5.6.0 ├── shelljs@0.7.8 ├── uglifyjs-webpack-plugin@1.3.0 ├── url-loader@0.5.9 ├── vue@2.5.17 ├── vue-loader@13.7.3 ├── vue-router@3.0.1 ├── vue-style-loader@3.1.2 ├── vue-template-compiler@2.5.17 ├── vuex@3.0.1 ├── webpack@3.12.0 ├── webpack-bundle-analyzer@2.13.1 ├── webpack-dev-server@2.11.3 └── webpack-merge@4.1.4
サンプルアプリを動かしてみる
実際にサンプルアプリを動かすまでの手順です。 サンプルアプリのREADMEに記載されている手順に従ってセットアップして行きます。
サンプルアプリの取得とライブラリの導入
git clone https://github.com/aws-samples/aws-amplify-vue.git cd aws-amplify-vue-sample npm install
AWSリソースの作成
amplifyコマンドで諸々のリソースを作成して行きます。amplifyコマンド未導入の場合は先に
npm install -g aws-amplify/cli
でamplifyコマンドをインストールしておいて下さい。
amplify init
amplify init Note: It is recommended to run this command from the root of your app directory ? Choose your default editor: Sublime Text Visual Studio Code Atom Editor IDEA 14 CE ❯ Vim (via Terminal, Mac OS only) Emacs (via Terminal, Mac OS only) None ? Choose the type of app that you're building (Use arrow keys) android ios ❯ javascript ? What javascript framework are you using (Use arrow keys) react react-native angular ionic ❯ vue none ? Source Directory Path: (src) ? Distribution Directory Path: (dist) ? Build Command: (npm run-script build) ? Start Command: (npm run-script serve) Using default provider awscloudformation For more information on AWS Profiles, see: https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html ? Do you want to use an AWS profile? (Y/n) ? Please choose the profile you want to use default ❯ amplify-cli-user ⠧ Initializing project in the cloud... CREATE_IN_PROGRESS awsamplifyvue-20181113141235 AWS::CloudFormation::Stack Tue Nov 13 2018 14:12:36 GMT+0900 (JST) User Initiated CREATE_IN_PROGRESS AuthRole AWS::IAM::Role Tue Nov 13 2018 14:12:39 GMT+0900 (JST) CREATE_IN_PROGRESS UnauthRole AWS::IAM::Role Tue Nov 13 2018 14:12:40 GMT+0900 (JST) CREATE_IN_PROGRESS DeploymentBucket AWS::S3::Bucket Tue Nov 13 2018 14:12:40 GMT+0900 (JST) CREATE_IN_PROGRESS AuthRole AWS::IAM::Role Tue Nov 13 2018 14:12:41 GMT+0900 (JST) Resource creation Initiated CREATE_IN_PROGRESS UnauthRole AWS::IAM::Role Tue Nov 13 2018 14:12:41 GMT+0900 (JST) Resource creation Initiated CREATE_IN_PROGRESS DeploymentBucket AWS::S3::Bucket Tue Nov 13 2018 14:12:42 GMT+0900 (JST) Resource creation Initiated ✔ Successfully created initial AWS cloud resources for deployments. Your project has been successfully initialized and connected to the cloud! Some next steps: "amplify status" will show you what you've added already and if it's locally configured or deployed "amplify <category> add" will allow you to add features like user login or a backend API "amplify push" will build all your local backend resources and provision it in the cloud "amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud Pro tip: Try "amplify add api" to create a backend API and then "amplify publish" to deploy everything CREATE_COMPLETE AuthRole AWS::IAM::Role Tue Nov 13 2018 14:12:58 GMT+0900 (JST) CREATE_COMPLETE UnauthRole AWS::IAM::Role Tue Nov 13 2018 14:12:59 GMT+0900 (JST) CREATE_COMPLETE DeploymentBucket AWS::S3::Bucket Tue Nov 13 2018 14:13:03 GMT+0900 (JST) CREATE_COMPLETE awsamplifyvue-20181113141235 AWS::CloudFormation::Stack Tue Nov 13 2018 14:13:05 GMT+0900 (JST)
amplify add auth
amplify add auth Using service: Cognito, provided by: awscloudformation The current configured provider is Amazon Cognito. Do you want to use the default authentication and security configuration? Yes, use the default configuration. Successfully added resource cognitoc9444f00 locally Some next steps: "amplify push" will build all your local backend resources and provision it in the cloud "amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud
amplify add storage
amplify add storage
? Please select from one of the below mentioned services (Use arrow keys)
❯ Content (Images, audio, video, etc.)
NoSQL Database
? Please provide a friendly name for your resource that will be used to label this category in the project: (s35c4b6179)
? Please provide bucket name: (awsamplifyvue54779a49be8043e088f681268e45d928)
? Who should have access: (Use arrow keys)
❯ Auth users only
Auth and guest users
? What kind of access do you want for Authenticated users (Use arrow keys)
read
write
❯ read/write
Successfully added resource s35c4b6179 locally
Some next steps:
"amplify push" builds all of your local backend resources and provisions them in the cloud
"amplify publish" builds all of your local backend and front-end resources (if you added hosting category) and provisions them in the cloud
amplify add api
amplify add api ? Please select from one of the below mentioned services (Use arrow keys) ❯ GraphQL REST ? Provide API name: (awsamplifyvue) ? Choose an authorization type for the API API key ❯ Amazon Cognito User Pool ? Do you have an annotated GraphQL schema? (y/N) ? Do you want a guided schema creation? (Y/n) ? What best describes your project: (Use arrow keys) ❯ Single object with fields (e.g., “Todo” with ID, name, description) One-to-many relationship (e.g., “Blogs” with “Posts” and “Comments”) Objects with fine-grained access control (e.g., a project management app with owner-based authorization) ? Do you want to edit the schema now? (Y/n) ? Press enter to continue GraphQL schema compiled successfully. Edit your schema at /Users/xxxxxxx/aws-amplify-vue/amplify/backend/api/awsamplifyvue/schema.graphql Successfully added resource awsamplifyvue locally Some next steps: "amplify push" will build all your local backend resources and provision it in the cloud "amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud
amplify push
amplify push | Category | Resource name | Operation | Provider plugin | | -------- | --------------- | --------- | ----------------- | | Auth | cognitoc9444f00 | Create | awscloudformation | | Storage | s35c4b6179 | Create | awscloudformation | | Api | awsamplifyvue | Create | awscloudformation | ? Are you sure you want to continue? (Y/n) GraphQL schema compiled successfully. Edit your schema at /Users/xxxxxx/aws-amplify-vue/amplify/backend/api/awsamplifyvue/schema.graphql ? Do you want to generate code for your newly created GraphQL API (Y/n) ? Choose the code generation language target (Use arrow keys) ❯ javascript typescript flow ? Enter the file name pattern of graphql queries, mutations and subscriptions (src/graphql/**/*.js) ? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions (Y/n) ? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes ⠋ Updating resources in the cloud. This may take a few minutes... UPDATE_IN_PROGRESS awsamplifyvue-20181113141235 AWS::CloudFormation::Stack Tue Nov 13 2018 14:20:42 GMT+0900 (JST) User Initiated CREATE_IN_PROGRESS storages35c4b6179 AWS::CloudFormation::Stack Tue Nov 13 2018 14:20:46 GMT+0900 (JST) CREATE_IN_PROGRESS authcognitoc9444f00 AWS::CloudFormation::Stack Tue Nov 13 2018 14:20:47 GMT+0900 (JST) CREATE_IN_PROGRESS storages35c4b6179 AWS::CloudFormation::Stack Tue Nov 13 2018 14:20:48 GMT+0900 (JST) Resource creation Initiated CREATE_IN_PROGRESS authcognitoc9444f00 AWS::CloudFormation::Stack Tue Nov 13 2018 14:20:49 GMT+0900 (JST) Resource creation Initiated ⠸ Updating resources in the cloud. This may take a few minutes... CREATE_IN_PROGRESS awsamplifyvue-20181113141235-storages35c4b6179-1FPFQAI1UNGXH AWS::CloudFormation::Stack Tue Nov 13 2018 14:20:48 GMT+0900 (JST) User Initiated CREATE_IN_PROGRESS awsamplifyvue-20181113141235-authcognitoc9444f00-17PFDDOAXMSPT AWS::CloudFormation::Stack Tue Nov 13 2018 14:20:49 GMT+0900 (JST) User Initiated CREATE_IN_PROGRESS S3Bucket AWS::S3::Bucket Tue Nov 13 2018 14:20:52 GMT+0900 (JST) ⠹ Updating resources in the cloud. This may take a few minutes... ... ... ...
amplify pushが完了したらCloudFormationのスタック更新が正常終了していることを確認します。
OKです。準備完了です。
サンプルアプリの実行
npm startでサンプルアプリを起動すると、、、
いつものAmplifyのサインイン画面が表示されるので、サインアップ後にプロフィールへ進みます。
ここで画像のアップロードを試みると、冒頭のエラーが発生しました。
ソースコードの修正
先ほどのエラーについて調べたところ、GitHubにissueが上がっていました。 サンプルアプリが使っているAws AmplifyのStorageコンポーネントがaws-sdkのs3クライアントにうまく認証情報を渡せていないようです。
- https://github.com/aws-amplify/amplify-js/issues/242
- https://github.com/aws-amplify/amplify-js/issues/1716
main.jsにハイライト箇所を追加します。
/*
* Copyright 2017-2017 Amazon.com, Inc. or its affiliates. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with
* the License. A copy of the License is located at
*
* http://aws.amazon.com/apache2.0/
*
* or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
* CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions
* and limitations under the License.
*/
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import App from './App'
import router from './router';
import Amplify from 'aws-amplify';
import aws_exports from './aws-exports';
import { components } from 'aws-amplify-vue';
Vue.config.productionTip = false
Amplify.configure(aws_exports)
import Storage from '@aws-amplify/storage';
import S3 from 'aws-sdk/clients/s3';
const hackyCreateS3 = (options) => {
const { bucket, region, credentials } = options;
return new S3({
apiVersion: '2006-03-01',
params: { Bucket: bucket },
region: region,
credentials: credentials
});
}
Storage._createS3 = hackyCreateS3;
/* eslint-disable no-new */
new Vue({
el: '#app',
router: router,
template: '<App/>',
components: {
App,
...components
}
})
再挑戦
改めてプロフィール画像をUPしてみます
今度はうまくいきました！！
まとめ
久しぶりにAWS Amplifyを触ったのですが、いつの間にかamplify/cliが使えるようになり、諸々のAWSリソース作成がとても簡単になっていました。 今回はVue.jsと関係ないところでハマってしまったのですが、今後Vue.jsの勉強も頑張っていこうと思います。 誰かの参考になれば幸いです。
